<template>

	<view class="login">
		<u-toast ref="uToast" />
		<!--顶部返回按钮-->
		<!-- <text class="back-btn iconfont iconzuo" @tap="navBack"></text> -->
		<view class="login-top bg-active">
			<view class="desc">
				<view class="title">Hi~</view>
				<text>{{ appName }}欢迎您</text>
			</view>
			<image class="login-pic" src="/static/login-pic.png"></image>
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/login-bg.png" :style="{height: tabCurrentIndex === 1 ? '150vw' : '94vw'}"></image>
			<view class="main">
				<view class="nav-bar">
					<view class="nav-bar-item" v-for="(item, index) in typeList" :key="index" :class="tabCurrentIndex === index ? 'nav-bar-item-active text-active' : ''"
					 @tap="tabClick(index)">
						{{ item.text }}
					</view>
				</view>
				<block v-if="tabCurrentIndex === 0">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont iconzhanghuffffffpx"></text>
							<input class="login-type-input" name="mobile" v-model="loginParams.account" placeholder="请输入账号" maxlength="11" />
						</view>
						<view class="input-item" v-if="loginByPass">
							<text class="iconfont iconmimaffffffpx"></text>
							<input class="login-type-input" type="password" v-model="loginParams.password" placeholder="请输入密码" maxlength="20" />
						</view>
						<!-- <view class="input-item input-item-sms-code" v-if="!loginByPass">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input
											type="number"
											class="login-type-input"
											v-model="loginParams.code"
											placeholder="请输入验证码"
											maxlength="4"
									/>
								</view>
								<button
										class="sms-code-btn"
										@tap.stop="getSmsCode('login')"
								>
									<text>获取验证码</text>
								</button>
							</view>
						</view> -->
					</view>
					<view class="login-type-tips">
						<view @tap="showLoginBySmsCode" class="forget-section">
							<!-- 密码登录 -->
						</view>
						<text @tap="navTo('/pages/public/password')">忘记密码？</text>
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading" @tap="toLogin">
						登录
					</button>
				</block>
				<block v-if="tabCurrentIndex === 1">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont iconwode"></text>
							<input class="login-type-input" type="text" name="mobile" v-model="registerParams.account" placeholder="请输入账号"
							 maxlength="11" />
						</view>
						<!-- <view class="input-item input-item-sms-code">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input
											type="number"
											class="login-type-input"
											v-model="registerParams.code"
											placeholder="请输入验证码"
											maxlength="4"
									/>
								</view>
								<button
										class="sms-code-btn"
										:disabled="smsCodeBtnDisabled"
										@tap.stop="getSmsCode('register', registerParams.mobile)"
								>
									<text v-if="!smsCodeBtnDisabled">获取验证码</text>
									<text v-else class="sms-code-resend">{{
										`重新发送 (${codeSeconds})`
										}}</text>
								</button>
							</view>
						</view> -->
						<view class="input-item">
							<text class="iconfont iconmimaffffffpx"></text>
							<input class="login-type-input" type="password" v-model="registerParams.password" placeholder="请输入密码" maxlength="20" />
						</view>
						<view class="input-item">
							<text class="iconfont iconmimaffffffpx"></text>
							<input class="login-type-input" type="password" v-model="registerParams.password_repetition" placeholder="请输入确认密码"
							 maxlength="20" />
						</view>
						<view class="input-item">
							<span class="iconfont">
								<image src="../../static/nickname.png" style="width: 50rpx;height: 50rpx;"></image>
							</span>
							<input class="login-type-input" type="text" v-model="registerParams.nickname" placeholder="请输入昵称" maxlength="20" />
						</view>
						<view class="input-item">
							<text class="iconfont icondianhua"></text>
							<input class="login-type-input" type="text" v-model="registerParams.phone" placeholder="请输入手机号" maxlength="20" />
						</view>
						<!-- <view class="input-item">
							<text class="iconfont iconyanzhengma1"></text>
							<input
									class="login-type-input"
									type="text"
									v-model="registerParams.promoCode"
									placeholder="请输入邀请码"
									maxlength="20"
							/>
						</view> -->
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading" @tap="toRegister">
						注册
					</button>
				</block>
			</view>
		</view>
		<view class="login-type-bottom text-active">
			{{ appName }} 版权所有
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				loginParams: {
					account: 'zs',
					password: '123456'
				},
				registerParams: {
					account: '',
					password: '',
					password_repetition: '',
					nickname: '',
					role: 'user',
					phone: '',
					status: '0',
					avatar: 'http://127.0.0.1:3000/images/avatar/undefined.1610590934458.jpg'
				},
				btnLoading: false,
				reqBody: {},
				codeSeconds: 0, // 验证码发送时间间隔
				loginByPass: true,
				smsCodeBtnDisabled: true,
				userInfo: null,
				appName: '',
				tabCurrentIndex: 0,
				typeList: [{
						text: '登录'
					},
					{
						text: '注册'
					}
				]
			};
		},
		created() {
			this.$u.post('/baseinfo/getBaseinfo').then(res => {
				console.log(res);
				this.appName = res.data.baseinfolist.name
			})
		},
		onLoad(options) {
			this.tabCurrentIndex = parseInt(options.type || 0, 10);
		},
		methods: {
				...mapMutations(['CLEAN_DISHES', 'CLEAN_TABLE','SET_TABLE']),
			// 发送验证码并进入倒计时
			async getSmsCode(usage = 'login') {
				uni.showToast({
					title: '点击了获取验证码'
				});
			},
			// 切换登录方式
			showLoginBySmsCode() {
				this.loginByPass = !this.loginByPass;
			},
			// 返回上一页
			navBack() {
				uni.navigateBack();
			},
			// 统一跳转路由
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			login() {
				this.$u.post('/users/getUser', this.loginParams).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.$u.throttle(this.login, 1000, true)
						uni.setStorageSync('token', ' Bearer ' + res.data.data[0].token)
						this.gettoken()
					} else {
						uni.showToast({
							title: res.data.msg
						});
					}
				})

			},
			gettoken() {
				uni.showLoading({
				    title: '登录中'
				});
				this.$u.get('/users/userinfo').then(res => {
					console.log(res);
					let that = this
					if (res.data.payload.account) {
						uni.setStorageSync('currentUser', JSON.stringify(res.data.payload))
						let account = res.data.payload.account
						let a = new Promise((resolve, reject) => {
							this.$u.post('/table/getTableByaccount', {
								account: account
							}).then(res2 => {
								resolve(res2)
							})
						})
						a.then(res3 => {
							console.log(res3, '获取的位置')
							if (res3.data.data == null && uni.getStorageSync('tablerecords')) {
								console.log('执行了1');
								uni.removeStorageSync('tablerecords')
								uni.removeStorageSync('vuexstate')
								this.CLEAN_TABLE()
							}else if(res3.data.data != null && !uni.getStorageSync('tablerecords')){
								console.log('执行了2');
								uni.removeStorageSync('tablerecords')
								uni.removeStorageSync('vuexstate')
								console.log(res3.data.data,'this.detail');
								let obj=[]
								let tablenumber=res3.data.data.name
								let useraccount=res3.data.data.orderuser.find(i=>i.account==account)
								let personnum=useraccount.personnum
								let tablefee=res3.data.data.tablefee
								obj.push(tablenumber,personnum,tablefee)
								this.SET_TABLE(obj)
							}else if(res3.data.data != null && uni.getStorageSync('vuexstate')){
								console.log('执行了3');
								if(res3.data.data.name==JSON.parse(uni.getStorageSync('vuexstate')).tabledetail.tablenumber){
									uni.removeStorageSync('tablerecords')
									
								}else{
									uni.removeStorageSync('tablerecords')
									uni.removeStorageSync('vuexstate')
									this.CLEAN_TABLE()
									let obj=[]
									let tablenumber=res3.data.data.name
									let useraccount=res3.data.data.orderuser.find(i=>i.account==account)
									let personnum=useraccount.personnum
									let tablefee=res3.data.data.tablefee
									obj.push(tablenumber,personnum,tablefee)
									this.SET_TABLE(obj)
									
								}
								
								console.log(res3.data.data,uni.getStorageSync('vuexstate'));
								
								
							}
							uni.hideLoading()
							this.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
								isTab:true,
								duration: "400",
								url: '/pages/index/index'
							})
							// uni.switchTab({
							// 	url: '/pages/index/index'
							// })
						})


					} else {
						uni.showToast({
							title: 'token无效'

						});

					}
				})
			},
			// 提交表单
			toLogin() {

				this.$u.throttle(this.login, 1000, true)
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
				// uni.request({
				// 	url:'http://127.0.0.1:3000/users/getUser',
				// 	method:'post',
				// 	data:this.loginParams,
				//  success: function(res) {
				//         // console.log(res.data);
				// 		if(res.data.code  === 0){
				// 			// uni.showToast({ title: '登录成功' });
				// 			console.log(res.data);
				// 			 uni.setStorageSync('token',res.data.token);

				// 		}
				//     }
				// })

				// uni.setStorageSync('token',res.data.token);
				// console.log(res.data);
				// this.$u.get('http://127.0.0.1:3000/users/getUser', {}, {
				// 				token: 'xyz'
				// 			}).then(res => {
				// 				console.log(res);
				// 			});
			},
			// 切换登录/注册
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 注册账号
			toRegister() {
				if (this.registerParams.password !== this.registerParams.password_repetition) {
					return uni.showToast({
						title: '两次密码不一致'
					});
				}
				if (this.registerParams.phone == '') {
					return uni.showToast({
						title: '请输入手机号'
					});
				} else {
					let phone = /^1\d{10}$/
					if (phone.test(this.registerParams.phone) == false) {
						return uni.showToast({
							title: '请输入正确的手机号'
						});

					}
				}
				// uni.showToast({ title: '点击了注册按钮' });
				// uni.request({
				// 	url:'http://127.0.0.1:3000/users/addUser',
				// 	method:'post',
				// 	data:this.registerParams,
				//  success: function(res) {
				//         // console.log(res.data);
				// 		if(res.data.code===200){
				// 			uni.showToast({ title: '注册成功' });

				// 		}
				//     }
				// })
				if (this.registerParams.account != '' && this.registerParams.password != '' && this.registerParams.nickname != '') {
					this.$u.post('/users/addUser', this.registerParams).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '注册成功'
							});
							this.tabCurrentIndex = 0
						} else {
							uni.showToast({
								title: '账号已被注册'
							});
						}

					});
				} else {
					uni.showToast({
						title: '请填写所有选项'
					});

				}


			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.login {
		width: 100%;
		position: relative;

		.bg-active {
			background-color: $base-color;
			color: #fff;
		}

		.text-active,
		.iconfont {
			color: $base-color;
		}

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 48rpx;
			color: #fff;
		}

		.login-top {
			height: 460rpx;
			position: relative;

			.desc {
				color: #fff;
				position: absolute;
				top: 200rpx;
				left: 40rpx;
				font-size: 48rpx;

				.title {
					font-size: 48rpx;
				}
			}

			.login-pic {
				position: absolute;
				width: 220rpx;
				height: 270rpx;
				right: 30rpx;
				top: 100rpx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72rpx;

			.login-bg {
				width: 94vw;
				height: 94vw;
				margin: 0 3vw;
			}

			.main {
				width: 94vw;
				position: absolute;
				top: 0;
				left: 3vw;

				.nav-bar {
					display: flex;
					height: 100rpx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;

					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96rpx;
						font-size: 32rpx;
						display: flex;
						margin: 0 120rpx;
						justify-content: center;
					}

					.nav-bar-item-active {
						border-bottom: 5rpx solid;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50rpx auto;

					.input-item {
						position: relative;
						height: 90rpx;
						line-height: 90rpx;
						margin-bottom: 30rpx;

						.iconfont {
							font-size: 50rpx;
							position: absolute;
							left: 0;
						}

						.login-type-input {
							height: 90rpx;
							padding-left: 80rpx;
							border-bottom: 1rpx solid rgba(0, 0, 0, .1);
						}

						.sms-code-btn,
						sms-code-resend {
							width: 240rpx;
							font-size: 26rpx;
						}
					}
				}

				.login-type-tips {
					padding: 0 50rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28upx;
					color: #666;
				}

				.confirm-btn {
					margin-top: 60upx;
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}

		.login-type-bottom {
			width: 100%;
			padding-bottom: 30rpx;
			text-align: center;
			font-size: 32rpx;
		}

		// 发送验证码样式
		.input-item-sms-code {
			.input-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.sms-code-btn {
				width: 200upx;
				background-color: #fff;
				display: flex;
				padding: 15upx 0;
				justify-content: center;
				align-items: center;
				border-radius: 12upx;
			}

			.sms-code-resend {
				color: #666;
			}
		}
	}
</style>
